﻿@section Styles{
    <style>
        body {
            background-color: #f0f2f5 !important;
        }
    </style>
}

@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindBack"]' id="hidden_isFindBack" />
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var isFindBack = document.getElementById('hidden_isFindBack').value;

        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power,
                    prefix: "/Admin/SysMenu",
                    table: {
                        //检索
                        search: {
                            state: false,
                            vm: {
                                parentId: null,
                                name: null
                            },
                        },
                        rows: 10,
                        page: 1,
                        total: 0,
                        selectedRowKeys: [],
                        columns: [],
                        data: [],
                    },
                    tree: {},
                    defaultProps: {
                        children: 'children',
                        label: 'title'
                    }

                }
            },
            created: function () {
                this.getTree();
                this.findList();
            },
            mounted: function () {

            },
            methods: {
                //重置检索条件
                onResetSearch() {
                    let searchVm = this.table.search.vm;
                    for (let key in searchVm) {
                        searchVm[key] = "";
                    }
                    this.findList();
                },
                //检索
                searchEvent: function () {
                    this.table.page = 1;
                    this.findList();
                },
                //获取列表数据
                findList() {
                    this.table.loading = true;
                    http.post(`${this.prefix}/findlist/${this.table.page}/${this.table.rows}`, this.table.search.vm)
                        .then((res) => {
                            let data = res.data;
                            this.table.loading = false;
                            this.table.page = data.page;
                            this.table.rows = data.size;
                            this.table.total = data.total;
                            this.table.columns = data.columns;
                            this.table.data = data.dataSource;
                        });
                },
                //删除数据
                deleteList(id) {
                    let t = this;
                    tools.confirm("确定要删除吗?", function () {
                        let ids = [];
                        if (id) {
                            ids.push(id);
                        } else {
                            ids = t.table.selectedRowKeys.map(w => w.id);
                        }
                        if (ids && ids.length === 0) {
                            return tools.message("请选择要删除的数据!", "警告");
                        }
                        http.post(`${t.prefix}/deleteList`, ids).then((res) => {
                            if (res.code != 1) return;
                            tools.message("删除成功!", "成功");
                            t.getTree();
                            t.findList();
                        });
                    });
                },
                //打开表单页面
                info(id) {
                    let t = this;
                    let path = `${this.prefix}/info/${id ? id : ''}`;
                    path += "?pId=" + (this.table.search.vm.parentId ? this.table.search.vm.parentId : '');

                    tools.pageOpen('编辑', path, function () {
                        t.getTree();
                        t.findList();
                    });
                },
                //导出
                exportExcel() {
                    http.download(`${this.prefix}/exportExcel`, this.table.search.vm);
                },
                //双击表格行
                row_dblclick: function (row, column, event) {
                    if (isFindBack === '1') {
                        window.localStorage.setItem('findBack', JSON.stringify(row));
                        tools.getLayer().close(tools.getLayer().getFrameIndex(window.name));
                    }
                },
                getTree: function () {
                    var t = this;
                    var path = t.prefix + "/FindMenuFunctionTree";

                    http.get(path, {}).then(res => {
                        if (res.code !== 1) return;
                        t.tree = res.data;
                    });
                },
            }
        });
    </script>
}
<div id="app" v-cloak class="p-15">

    <el-row :gutter="20">
        <el-col :xs="24" :sm="10" :md="5" :lg="5" :xl="5">

            <el-card class="box-card" style="min-height:calc(100vh - 40px)">
                <div slot="header" class="clearfix">
                    <span>菜单树</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @@click="table.search.vm.parentId=null;findList();getTree();">查看一级</el-button>
                </div>
                <el-tree show-checkbox node-key="key"
                         @@node-click="(row)=>{table.search.vm.parentId=row.key;findList()}"
                         :data="tree.treeData" :props="defaultProps"
                         :default-expanded-keys="tree.defaultExpandedKeys"
                         :default-checked-keys="tree.defaultCheckedKeys" :expand-on-click-node="false">
                </el-tree>
            </el-card>

        </el-col>
        <el-col :xs="24" :sm="14" :md="19" :lg="19" :xl="19">

            <el-collapse-transition>
                <el-card class="w100 mb-15" shadow="never" :body-style="{padding:0}" v-show="table.search.state">
                    <el-row :gutter="15" class="p-15">
                        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" class="pb-15">
                            <el-input v-model="table.search.vm.name" placeholder="菜单名称" />
                        </el-col>
                        <!--button-->
                        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="float: right">
                            <el-button type="primary" @@click="searchEvent">查询</el-button>
                            <el-button @@click="onResetSearch">重置</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-collapse-transition>
            <el-card class="w100" shadow="never" :body-style="{padding:0}">
                <el-row :gutter="15" class="p-15 pb-0">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15">
                        <template v-if="power.search">
                            <el-button @@click="table.search.state=!table.search.state">
                                <i class="el-icon-arrow-up" v-if="table.search.state"></i>
                                <i class="el-icon-arrow-down" v-else></i>
                                检索
                            </el-button>
                        </template>
                        <template v-if="power.insert">
                            <el-button type="primary" icon="el-icon-plus" @@click="info()">
                                新建
                            </el-button>
                        </template>
                        <template v-if="power.delete">
                            <el-button type="danger" icon="el-icon-delete" @@click="deleteList()">
                                批量删除
                            </el-button>
                        </template>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15 text-right">
                        <el-dropdown>
                            <el-button icon="el-icon-arrow-down">
                                更多操作
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <span @@click="exportExcel"> 导出 Excel</span>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <span @@click="exportExcel"> 导出 Pdf</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <el-table :data="table.data" row-key="id" @@selection-change="(array)=>{table.selectedRowKeys=array;}" @@row-dblclick="row_dblclick" size="medium">
                    <el-table-column type="index" width="50" fixed></el-table-column>
                    <el-table-column type="selection" width="50" fixed></el-table-column>
                    <!--根据查询接口自动加载头部信息 start-->
                    <el-table-column prop="number" label="编号" width="50"></el-table-column>
                    <el-table-column prop="name" label="菜单名称" width="150"></el-table-column>
                    <el-table-column prop="url" label="菜单地址"></el-table-column>
                    <el-table-column prop="父级菜单" label="父级菜单" width="150"></el-table-column>
                    @*<el-table-column prop="icon" label="菜单图标" width="200"></el-table-column>*@
                    <el-table-column prop="isShow" label="是否显示" width="100"></el-table-column>
                    <!--<el-table-column v-for="(item,index) in table.columns"
                                     :prop="item.fieldName"
                                     :label="item.title"
                                     :key="index"
                                     :width="item.width"
                                     v-if="item.show">
                    </el-table-column>-->
                    <!--根据查询接口自动加载头部信息 end-->
                    <el-table-column fixed="right" label="操作" width="100" v-if="power.update || power.delete">
                        <template slot-scope="scope">
                            <el-link type="primary" @@click="info(scope.row.id)" v-if="power.update">
                                编辑
                            </el-link>
                            <el-link type="danger" @@click="deleteList(scope.row.id)" v-if="power.delete">
                                删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @@size-change="(val)=>{table.rows=val;findList();}"
                               @@current-change="(val)=>{table.page=val;findList();}" :current-page="table.page"
                               :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.rows"
                               layout="total, sizes, prev, pager, next, jumper" :total="table.total" class="mt-15 ml-15 mb-15">
                </el-pagination>
            </el-card>

        </el-col>
    </el-row>
</div>